<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" href="../src/css/layui.css">
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css">
    <script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">layui 后台布局</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">控制台</a></li>
            <li class="layui-nav-item"><a href="">商品管理</a></li>
            <li class="layui-nav-item"><a href="">用户</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">其它系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="">邮件管理</a></dd>
                    <dd><a href="">消息管理</a></dd>
                    <dd><a href="">授权管理</a></dd>
                </dl>
            </li>
        </ul>

    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">所有商品</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">列表一</a></dd>
                        <dd><a href="javascript:;">列表二</a></dd>
                        <dd><a href="javascript:;">列表三</a></dd>
                        <dd><a href="">超链接</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">解决方案</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">列表一</a></dd>
                        <dd><a href="javascript:;">列表二</a></dd>
                        <dd><a href="">超链接</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">云市场</a></li>
                <li class="layui-nav-item"><a href="">发布商品</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            插件上传
            <br>
            <br>

            <br>
            <br>
            <div class="layui-upload-drag" id="test10">
                <i class="layui-icon"></i>
                <p>点击上传，或将插件zip文件拖拽到此处</p>

            </div>

            <div class="layui-hide" id="uploadProgress">
                <hr>
                <div class="layui-progress" lay-filter="demo" lay-showPercent="true">
                    <div class="layui-progress-bar" lay-percent="1%"></div>
                </div>
            </div>

            <div class="layui-hide" id="uploadDemoView">

                <hr>
                <a href="#" target="_blank">开始访问你的插件</a>

            </div>
            <br>
            <br>
            <button type="button" class="layui-btn" id="test16">
                <i class="layui-icon">&#xe67c;</i>上传插件
            </button>

            <br>
            <br>
            <script>
                layui.use(['upload', 'element'], function () {
                    var upload = layui.upload;
                    var element = layui.element;

                    //执行实例
                    var uploadInst = upload.render({
                        elem: '#test16' //绑定元素
                        , url: '/index/index/uploadPlug' //上传接口
                        , accept: 'file'
                        , field: 'file_plugin'
                        , done: function (res) {

                            layer.msg(res.info);
                            //上传完毕回调
                            console.log(res);
                        }
                        , error: function () {
                            //请求异常回调
                            console.log("上传失败");
                        }
                    });

                    //拖拽上传
                    upload.render({
                        elem: '#test10'
                        , url: '/index/index/uploadPlug' //改成您自己的上传接口
                        , accept: 'file'
                        , field: 'file_plugin'
                        ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                            layui.$('#uploadProgress').removeClass('layui-hide');
                        }
                        , progresses: function (n, elem) {
                            var percent = n + '%' //获取进度百分比
                            element.progress('demo', percent); //可配合 layui 进度条元素使用

                            //以下系 layui 2.5.6 新增
                            console.log(elem); //得到当前触发的元素 DOM 对象。可通过该元素定义的属性值匹配到对应的进度条。
                        }
                        , progress: function (value) { //上传进度回调 value进度值,由于是进度条同时又是多文件上传不只一个进度条，所以要保证每次进度条的类名不一致，demoCount控制类名，demoFlag保证上下一致，所以该方法一直在被调用

                            console.log(value);
                            element.progress('demo', value + "%");



                        }
                        , done: function (res) {
                            layer.msg(res.info);
                            if (res.status === 1) {
                                layui.$('#uploadDemoView').removeClass('layui-hide').find('a').attr('href', res.pluginName);
                            }
                            console.log(res)
                        }
                    });
                });
            </script>
            <br>
            <br>

            <form action="/index/index/upload" enctype="multipart/form-data" method="post">
                <input type="file" name="image"/> <br>
                <input type="submit" value="上传"/>
            </form>
            <br>
            <br>
            <div id="test1"></div>
            <br>
            <br>
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <div class="layui-input-inline" style="width: 120px;">
                        <input type="text" value="" placeholder="请选择颜色" class="layui-input" id="test-form-input">
                    </div>
                    <div class="layui-inline" style="left: -11px;">
                        <div id="test-form"></div>
                    </div>
                </div>
            </form>


            小圆点，通过 layui-badge-dot 来定义，里面不能加文字


            <br>
            <br>
            <span class="layui-badge-dot"></span>

            <span class="layui-badge-dot  "></span>

            <br>
            <br>

            椭圆体，通过 layui-badge 来定义。事实上我们把这个视作为主要使用方式
            <span class="layui-badge">6</span>
            <span class="layui-badge">99</span>
            <span class="layui-badge">61728</span>
            <br>
            <br>
            <span class="layui-badge">赤</span>
            <span class="layui-badge layui-bg-orange">橙</span>

            <br>
            <br>
            边框体，通过 layui-badge-rim 来定义
            <span class="layui-badge-rim">6</span>
            <span class="layui-badge-rim">Hot</span>

            <div class="layui-card">
                <div class="layui-card-header">卡片面板</div>
                <div class="layui-card-body">
                    卡片式面板面板通常用于非白色背景色的主体内<br>
                    从而映衬出边框投影
                </div>
            </div>


            <div class="layui-collapse" lay-accordion>
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">杜甫</h2>
                    <div class="layui-colla-content layui-show">内容区域</div>
                </div>
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">李清照</h2>
                    <div class="layui-colla-content layui-show">内容区域</div>
                </div>
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">鲁迅</h2>
                    <div class="layui-colla-content layui-show">内容区域</div>
                </div>
            </div>

            <br>
            <div class="layui-progress" lay-showPercent="true">
                <div class="layui-progress-bar" lay-percent="66%"></div>
            </div>


            <div class="layui-btn-container">

                <button class="layui-btn site-demo-active" data-type="setPercent">设置50%</button>
                <button type="button" class="layui-btn">按钮一</button>
                <button type="button" class="layui-btn">按钮二</button>
                <button type="button" class="layui-btn">按钮三</button>

                <button type="button" class="layui-btn">一个标准的按钮</button>
                <a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>
            </div>

            <div style="layui-icon layui-icon-face-smile"></div>

            <i class="layui-icon layui-icon-face-smile"></i>
            <i class="layui-icon layui-icon-upload"></i>


            <i class="layui-icon">&#xe60c;</i>

            <i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i>
            <i class="layui-icon layui-icon-upload" style="font-size: 30px; color: #1E9FFF;"></i>


        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>
<script src="../src/layui.js"></script>
<script>
    //JavaScript代码区域
    layui.use(['element', 'colorpicker'], function () {
        var $ = layui.jquery
        var element = layui.element;
        var colorpicker = layui.colorpicker;
        //渲染
        colorpicker.render({
            elem: '#test1'  //绑定元素
        });


        //表单赋值
        colorpicker.render({
            elem: '#test-form'
            , color: '#1c97f5'
            , done: function (color) {
                $('#test-form-input').val(color);
            }
        });


        $('.site-demo-active').on('click', function () {
            element.progress('demo', '10%')
            //模拟loading
            var n = 0
            n = n + Math.random() * 90 | 0;

            element.progress('demo', n + "%")


        });

    });
</script>
</body>
</html>
